import 'package:flutter/material.dart';
import 'package:xview/routers/index.dart';
import 'package:xview/utils/dimension.dart';

class XCell extends StatefulWidget {
  String title;
  Color titleColor;
  double titleSize;
  Color backgroundColor;
  Color borderBottomColor;
  double borderBottomWidth;
  bool showIcon;
  double iconSize;
  IconData? icon;
  Color iconColor;
  String? label;
  Color labelColor;
  double labelSize;
  IconData rightIcon;
  double rightIconSize;
  Color rightIconColor;
  String? path;

  XCell({
    required this.title,
    this.titleColor = const Color(0xFF1F2329),
    this.titleSize = 17,
    this.backgroundColor = Colors.white,
    this.borderBottomColor = const Color.fromRGBO(214, 215, 217, 1),
    this.borderBottomWidth = 1,
    this.showIcon = false,
    this.iconSize = 24,
    this.icon,
    this.iconColor = const Color(0xff1661FF),
    this.label,
    this.labelColor = const Color(0xff606266),
    this.labelSize = 16,
    this.rightIcon = Icons.keyboard_arrow_right,
    this.rightIconSize = 26,
    this.rightIconColor = const Color(0xff606266),
    this.path,
  });

  @override
  State<StatefulWidget> createState() {
    return _xCellState();
  }
}

class _xCellState extends State<XCell> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        if(widget.path != null){
          MyRouter.go(context, widget.path);
        }
      },
      behavior: HitTestBehavior.opaque,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: Dimension(context).toPx(10),horizontal: Dimension(context).toPx(15)),
        decoration: BoxDecoration(
          color: widget.backgroundColor,
          border: Border(
              bottom: BorderSide(
                width: widget.borderBottomWidth,
                color: widget.borderBottomWidth>0?widget.borderBottomColor:Colors.transparent,
              )
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              child: Row(
                children: [
                  Offstage(
                    offstage: !widget.showIcon,
                    child: Icon(widget.icon,size: widget.iconSize,color: widget.iconColor),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: Dimension(context).toPx(5)),
                    child: Text('${widget.title}',style: TextStyle(color: widget.titleColor,fontSize: Dimension(context).toPx(widget.titleSize))),
                  )
                ],
              ),
            ),
            Offstage(
              offstage: false,
              child: Row(
                children: [
                  Offstage(
                    offstage: widget.label == null?true:false,
                    child: Text('${widget.label}',style: TextStyle(color: widget.labelColor,fontSize: Dimension(context).toPx(widget.labelSize))),
                  ),
                  Offstage(
                    offstage: widget.rightIcon==null?true:false,
                    child: Container(
                      margin: EdgeInsets.only(left: Dimension(context).toPx(4)),
                      child: Icon(widget.rightIcon,size: widget.rightIconSize,color: widget.rightIconColor),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
